<script setup lang="ts">
  import type { ExpressData } from '@/type/order'

  // #ifdef MP-WEIXIN

  import carIcon from '@/static/images/car.png'
  import startIcon from '@/static/images/start.png'
  import endIcon from '@/static/images/end.png'
  import { computed } from 'vue'
  // #endif

  interface Props {
    logisticsInfo: ExpressData
  }
  const props = defineProps<Props>()

  const start = computed(() => {
    return props.logisticsInfo.logisticsInfo[props.logisticsInfo.logisticsInfo.length - 1]
  })

  const end = computed(() => {
    return props.logisticsInfo.logisticsInfo[0]
  })

  const car = computed(() => {
    return props.logisticsInfo.currentLocationInfo
  })
</script>

<template>
  <map
    class="uni-map"
    :markers="[
      {id:1,latitude:parseFloat(start.latitude),longitude:parseFloat(start.longitude),iconPath:startIcon,width:30,height:30},
      {id:2,latitude:parseFloat(car.latitude),longitude:parseFloat(car.longitude),iconPath:carIcon,width:30,height:30},
      {id:3,latitude:parseFloat(end.latitude),longitude:parseFloat(end.longitude),iconPath:endIcon,width:30,height:30},
    ]"
    :scale="5"
    :latitude="parseFloat(car.latitude)"
    :longitude="parseFloat(car.longitude)"
    :polyline="[
      {
        points: props.logisticsInfo.logisticsInfo.map((item) => {
          return { longitude: parseFloat(item.longitude), latitude: parseFloat(item.latitude) }
        }),
        width: 3,
        color: '#FF0000',
      },
    ]"
  ></map>
</template>

<style lang="scss" scoped>
  .uni-map {
    width: 100%;
    height: 470px;
  }
</style>
